<template>
  <d2-container>
    <el-form status-icon label-width="100px" class="demo-ruleForm">
      <el-button type="primary" @click="back()" style="margin-bottom: 10px;">返回</el-button>
      <el-row v-if="orderInfo">
        <el-col :span="8">
          <div class="box">
            <div class="top">--------- 早餐 ---------</div>
            <div class="top1">*********************************************</div>
            <div class="goodsInfo" v-for="(item, index) in orderInfo[1].zao" :key="index">
              <div>{{ item.g_name }}</div>
              <div class="money">
                <span>×{{ item.g_stock }}</span>
                <span>{{ item.money }}</span>
              </div>
            </div>
            <div class="center">
              <el-button type="primary" v-if="orderInfo[2].zao == 0" @click="orderDistr(1)">订单配送</el-button>
              <el-button type="primary" @click="printOrder(1)">打印订单</el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="box">
            <div class="top">--------- 中餐 ---------</div>
            <div class="top1">*********************************************</div>
            <div class="goodsInfo" v-for="(item, index) in orderInfo[1].zhong" :key="index">
              <div>{{ item.g_name }}</div>
              <div class="money">
                <span>×{{ item.g_stock }}</span>
                <span>{{ item.money }}</span>
              </div>
            </div>
            <div class="center">
              <el-button type="primary" v-if="orderInfo[2].zhong == 0" @click="orderDistr(2)">订单配送</el-button>
              <el-button type="primary" @click="printOrder(2)">打印订单</el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="box">
            <div class="top">--------- 晚餐 ---------</div>
            <div class="top1">*********************************************</div>
            <div class="goodsInfo" v-for="(item, index) in orderInfo[1].wan" :key="index">
              <div>{{ item.g_name }}</div>
              <div class="money">
                <span>×{{ item.g_stock }}</span>
                <span>{{ item.money }}</span>
              </div>
            </div>
            <div class="center">
              <el-button type="primary" v-if="orderInfo[2].wan == 0" @click="orderDistr(3)">订单配送</el-button>
              <el-button type="primary" @click="printOrder(3)">打印订单</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog
      title="确认打印信息"
      :visible.sync="dialogVisible">
      <el-row>
        <el-col :span="8">
          <div id="box" v-if="orderPrint">
            <div class="top">------- 外卖订单 -------</div>
            <div class="top-diz">
              <div>地址: {{ orderPrint[0].uaddress }}</div>
            </div>
            <div class="top1">******************************</div>
            <div class="goodsInfo" v-for="(item, index) in orderPrint" :key="index">
              <div>{{ item.g_name }}</div>
              <div class="money">
                <span>×{{ item.g_stock }}</span>
                <span>{{ item.money }}</span>
              </div>
            </div>
            <!-- <div class="top1">-------------- 其他--------------</div>
            <div class="goodsInfo">
              <div>总金额</div>
              <div>{{ orderPrint.sum_money }}</div>
            </div>
            <div class="goodsInfo">
              <div>优惠金额</div>
              <div>{{ orderPrint.discount_money }}</div>
            </div>
            <div class="top1">******************************</div>
            <div class="bottom">
              <div>实付款: {{ orderPrint.money }}</div>
            </div> -->
          </div>
        </el-col>
        <el-col :span="8"></el-col>
        <el-col :span="8"></el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="printqd">确认打印</el-button>
      </span>
    </el-dialog>
  </d2-container>
</template>

<script>
import { getOrderItemYy, orderDistribution } from "@/api/accountAdmin/index";
import util from "@/libs/util.js";

export default {
  data() {
    return {
      // 列表数据
      orderInfo: {},
      printOrderInfo: {},
      orderPrint: '',
      dialogVisible: false,
    };
  },
  created() {
    let params = {
      page: 1,
      limit: 10
    };
    this.init(params);
  },
  methods: {
    // 初始化身体数据列表
    init(params) {
      params.code = this.$route.query.code
      getOrderItemYy(params)
        .then(res => {
          if (res.success) {
            this.orderInfo = res.rows
            this.printOrderInfo = res.rows[1]
            res.rows.map(item => {
              if (item.g_time == 1) {
                item.g_time1 = '早'
              } else if (item.g_time == 2) {
                item.g_time1 = '中'
              } else if (item.g_time == 3) {
                item.g_time1 = '晚'
              }
            })
          }
        })
        .catch(err => {
          this.$message.error(err);
        });
    },

    // 订单配送
    orderDistr(time) {
      let params = {
        code: this.$route.query.code,
        oType: 1,
        gTime: time
      }
      orderDistribution(params)
        .then(res => {
          if (res.success) {
            this.$message({
              message: "配送成功",
              type: "success"
            });
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
          let params = {
            page: 1,
            limit: 10,
          };
          this.init(params);
        })
        .catch(err => {
          this.$message.error(err);
        });
    },

    // 打印订单
    printOrder(itemId) {
      this.dialogVisible = true
      if (itemId == 1) {
        this.orderPrint = this.printOrderInfo.zao
      } else if (itemId == 2) {
        this.orderPrint = this.printOrderInfo.zhong
      } else if (itemId == 3) {
        this.orderPrint = this.printOrderInfo.wan
      }
    },

    // 打印确定
    printqd() {
      let printBox = document.getElementById('box'); //获取需要打印的内容
      let newWin = window.open(window.document.URL); //新打开一个标签页，这样不会影响现使用的页面
      let newContent =printBox.innerHTML;
      newWin.document.body.innerHTML = newContent; //将打印的部分赋值给新打开的标签页
      newWin.print();//执行打印
      newWin.close();//关闭打印窗口
      this.dialogVisible = false
    },

    // 返回上一级
    back() {
      this.$router.back(-1)
    },
  }
};
</script>
<style lang="scss" scoped>
.box {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  padding: 10px;
}
.top {
  display: flex;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
}
.top1 {
  display: flex;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
}
.goodsInfo {
  display: flex;
  justify-content: space-between;
  .money {
    width: 50px;
    display: flex;
    justify-content: space-between;
  }
}
.center {
  display: flex;
  justify-content: center;
}
.top-diz {
  font-weight: bold;
  display: flex;
  margin: 10px 0;
}
</style>
